<!-- 
    按钮组件

    按钮里的内容是一个图标加一个文字 图标和文字之间有间隔
-->
<template>
    <div class="base-component" :style="`--bg: ${ bg }; --tc: ${ tc }`">
        <div class="icon" v-show="icon" :style="`--icon: url(${ icon }); --w: ${ iconSize }; --h: ${ iconSize }`"></div>
        <div class="text">{{ text }}</div>
    </div>
</template>

<script setup>
defineProps({
    text: { type: String,  default: '' },
    bg: { type: String,  default: '#2563eb' },
    tc: { type: String,  default: '#fff' },
    icon: { type: String,  default: '' },
    iconSize: { type: String,  default: '1vw' },
});
</script>

<style scoped lang="less">
.base-component {
    --after-border-color: #00000000;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5vw 1vw;
    background-color: var(--bg);
    border-radius: 0.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    position: relative;

    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        padding: 0.1vw;
        border-radius: 0.55vw;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        outline: 0.1vw solid var(--after-border-color);
    }
    
    &:hover {
        --after-border-color: var(--bg);
    }

    .text {
        font-size: 0.9vw;
        color: var(--tc);
        white-space: nowrap;
    }
}
</style>